import  { useState } from 'react';
import axios from '../../components/service/request';
import { Modal, Button, Spin } from 'antd'; // 引入 Spin 组件用于显示加载中的提示

const ViewBtn = ({ record , indexId, baseUir}  ) => {

  const [imageData, setImageData] = useState(null);
  const [visible, setVisible] = useState(false); // 弹窗的显示状态
  const [isLoading, setIsLoading] = useState(false); // 图片加载状态

  const handleButtonClick = () => {
    setIsLoading(true);            // 设置图片加载状态为 true
    setVisible(true);              // 显示弹窗
    // console.log(baseUir,'123jmkln');

    // 从后端获取图片数据
    axios
       .get(baseUir+"/view", {
        responseType: 'blob',
        params: {
          id: record.id,      // 将record.id作为查询参数传递给后端
          indexid:indexId     // 将indexid作为查询参数传递给后端
        },
      })
      .then(response => {
        // 创建一个URL对象以显示图片
        console.log(response);
        const imageUrl= URL.createObjectURL(response);
    
        setIsLoading(false);
        // 设置图片加载状态为 false
        setImageData(imageUrl);
        if (indexId === '0'||indexId==='2') {
          window.open(imageUrl, '_blank');
        }

      })
      .catch(error => {
        console.error('Error fetching image:', error);
        setIsLoading(false); // 请求出错时，清除加载状态
      });
  };

  const handleModalClose = () => {
    // 处理弹窗关闭事件，隐藏弹窗
    setVisible(false);
  };



  if (indexId === '0') {
    return (
      <div>
        <Button type="primary" onClick={handleButtonClick}>
          点击查看
        </Button>
        {/* <Modal visible={visible} onCancel={handleModalClose} footer={null}>
          {isLoading ? (
            <Spin />                   // 加载中的提示
          ) : imageData ?
            (
              <img src={imageData} alt="图片" />
            ) : (
              <span>未能获取到图片</span>
            )}
        </Modal> */}
      </div>
    );
  }
  else if (indexId === '1') {
    return (
      <div>
        <Button type="primary" onClick={handleButtonClick}>
          点击查看
        </Button>
        <Modal visible={visible} onCancel={handleModalClose} footer={null}>
          {isLoading ? (
            <Spin />               // 加载中的提示
          ) : imageData ?
            (
                <video src={imageData}  controls="controls" alt="视频" width="100%" height="100%" />
               
            ) : (
              <span>未能获取到视频</span>
            )}
        </Modal>
      </div>
    );
  }
  else { 
    return (
      <div>
        <Button type="primary" onClick={handleButtonClick}>
          点击查看
        </Button>
        {/* <Modal visible={visible} onCancel={handleModalClose} footer={null}>
          {isLoading ? (
            <Spin />               // 加载中的提示
          ) : imageData ?
              (
          <embed src={imageData} type="application/pdf" width="100%" height="100%" />
          ) : (
            <span>未能获取到文档</span>
          )}
        </Modal> */}
      </div>
    );
  }

  
};

export default ViewBtn;